<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>权限树</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
    </style>
</head>
<body>
<div class="diva">
            <el-container>
                <el-header style="height: 160px;">Header</el-header>
                <el-container>
                    <el-aside width="200px" style="height: 600px;">
                        <el-tree
                                :data="treeData"
                                accordion
                                @node-click="handleNodeClick"
                                :icon-class="icon"
                        >
                        </el-tree>
                    </el-aside>
                    <el-main style="height: 600px;">
                        <el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
                            <el-tab-pane
                                    v-for="(item, index) in editableTabs2"
                                    :key="item.name"
                                    :label="item.title"
                                    :name="item.name"
                            >
                                 <iframe :src="item.url" style="width:100%;height:550px;border: 0px;" scrolling="auto"  ></iframe>
                            </el-tab-pane>
                        </el-tabs>

                    </el-main>
                </el-container>
            </el-container>
    </div>
   <script>
       var vm = new Vue({
           el:".diva",
           data:{
               icon:'el-icon-menu',
               treeData:[],
               editableTabsValue2: '2',
               editableTabs2: [ {
                   title: 'Tab 2',
                   name: '2',
                   url: 'https://www.baidu.com'
               }],
               tabIndex: 2
           },
           created:function(){
               var _self =this
               axios.post("/power/tree").then(function(response){
                 _self.treeData = response.data;
               })
           },
           methods: {
               handleNodeClick: function (n) {
                   // alert(n.label+",url"+n.url);
                   if (n.url != null && n.url != 'null' && n.url != '')
                       this.addTab(n.label, n.url);
               },
               addTab: function (targetName, url) {
                   var newTabName = targetName;
                   if (JSON.stringify(this.editableTabs2).indexOf(newTabName) == -1) {
                       this.editableTabs2.push({
                           title: newTabName,
                           name: newTabName,
                           url: url
                       });
                   }
                   this.editableTabsValue2 = newTabName;
               },
               removeTab(targetName) {
                   let tabs = this.editableTabs2;
                   let activeName = this.editableTabsValue2;
                   if (activeName === targetName) {
                       tabs.forEach((tab, index) => {
                           if (tab.name === targetName) {
                               let nextTab = tabs[index + 1] || tabs[index - 1];
                               if (nextTab) {
                                   activeName = nextTab.name;
                               }
                           }
                       });
                   }
                   this.editableTabsValue2 = activeName;
                   this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
               }
           }
       })
   </script>
</body>
</html>